<template>
  <div class="wyn-child">
    <h2>Child</h2>
    <button @click="handleClick">给父组件传值</button>

    <hr />

    <p>父组件传递的值：{{ name }}</p>
  </div>
</template>

<script setup lang="ts">
// 【接收父组件传递的值】

// JS 写法
// const props = defineProps({
//   name: {
//     type: String,
//     default: "张三",
//   },
// });

// TS 写法需要用 withDefaults 这个才能设置默认值
const props = withDefaults(defineProps<{ name: string }>(), {
  name: () => "默认值",
});

// script 中使用
console.log(props.name); // 父组件传递的值：张三

// *****************************************************************************************
// *****************************************************************************************
// *****************************************************************************************

// 【给父组件传值】

// JS 写法
// const emit = defineEmits(["on-click"]);

// TS写法
interface EmitFn {
  (e: "on-click", ...args: number[]): void;
}

const emit = defineEmits<EmitFn>();

const handleClick = () => {
  emit("on-click", 1, 2, 3);
};

// *****************************************************************************************
// *****************************************************************************************
// *****************************************************************************************

// 【暴露给父组件的值和方法】

defineExpose({
  name: "父组件传递的值：",
  log() {
    console.log("我是子组件暴露的方法");
  },
});
</script>

<style scoped lang="scss">
@include b(child) {
  width: 180px;
  height: 100px;
  margin-top: 10px;
  background-color: #eee;
  padding: 10px;

  hr {
    margin: 10px 0;
  }

  p {
    background: pink;
  }
}
</style>
